<!DOCTYPE html>
<html style="width: 100%; height: 100%;margin: 0px;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="./easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="./easyui/color.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script  src="./js/jquery.easyui.min.js"></script>
    <script src="./js/leaflet.js"></script>
    <script src="./js/leaflet-heat.js"></script>
    <script src="./js/CustomWebSDK.min.js"></script>
    <script src="./js/leaflet-heatmap.js"></script>
    <script src="./js/heatmap.min.js"></script>
    <script src="./js/server-root.js"></script>
    <script src="./js/echarts-all.js" type="text/javascript"></script>
    <script src="./js/EchartsWidget.js" type="text/javascript"></script>

    <style>
        #map { width: 100%; height: 100%; }
        body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; width: 100%; height: 100%;margin: 0px;  }
        #pm { width: 300px !important;height: 150px;border-radius:10px 10px 0px 0px;position: fixed;right: 100px;top: 20px;z-index: 500 }
        /*#pp { width: 300px !important;;height: 150px;padding: 10px;border-radius:0px 0px 10px 10px;position: fixed;right: 100px;top: 170px;z-index: 500; }*/
        #la { margin:20px 0;position: absolute;margin-left : 50%;z-index: 500 ;}
        #close { margin:20px 0;position: absolute;right: 0px;bottom: 40%;z-index: 500;margin: 0px;background-color: white}
        .line{ width: 100%;height:100% ;}
        #picture { width: 100%;height:40%;z-index: 500;position: absolute;bottom:0; background-color: white;}
    </style>

</head>
<body style="width: 100%; height: 100%;margin: 0px;">

<div id="pm" class="easyui-panel">
    <h3 align="center">传感器检测</h3>

    传感器编号: <input id="sensor" class="easyui-textbox" data-options="buttonText:'搜索',prompt:'请输入传感器编号...'" style="width:200px;height:32px;" onClickButton="submitForm()">

</div>

<div id="map"></div>
<div id="close" >
    <button >收缩</button>
    <button id="guanbi">关闭</button>
</div>
<div id="picture">


    <div id="la">
        <select onchange="onChange(this.options[this.selectedIndex].value)" name="select">
            <option value="110100"  selected="selected">北京</option>
            <option value="120100">天津</option>
            <option value="230100">哈尔滨</option>
        </select>
    </div>

    <div class="line"></div>

</div>

<script src="./js/leaflet-heat.js"></script>
<script>

    var map = L.map('map',{crs:L.CRS.CustomEPSG4326,center: {lon:116.4, lat:39.93},zoom: 11,inertiaDeceleration:15000});

    L.tileLayer('http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=42cac6e13cafbf0ee8d55b2f7af43dc8', {}).addTo(map);
    L.tileLayer('http://t1.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=42cac6e13cafbf0ee8d55b2f7af43dc8', {}).addTo(map);

    var heatLayer;

    map.on('moveend', function(e) {
        updateHeatMap();
    });

    map.on('resize', function(e) {
        updateHeatMap();
    });

    updateHeatMap();
    //    setInterval(updateHeatMap,10000);

    function updateHeatMap(){
        var bounds = map.getBounds();
        var boundsStr =  bounds._southWest.lng+','+bounds._southWest.lat+','+bounds._northEast.lng+','+bounds._northEast.lat;
        var zoom = map.getZoom();
        var name = 'O3';
        var addressPoints = [];
        var url =  server_root+'/site/siteHotMap?{data:{bbox:['+boundsStr+'];type:"'+name +'";level:'+zoom+'}}&tk=42cac6e13cafbf0ee8d55b2f7af43dc8';
        $.ajax(url,{dataType:'json',success:function(data){
            data = data.data;

            for(var i = 0;i<data.length;i++){
                var item = data[i];
                var p1 = item.cp[1];
                var p2 = item.cp[0];
                var p3 = item.value;
                if(!p3){
                    p3=1;
                }
                addressPoints.push([p1,p2,p3]);
            }

            if(!heatLayer){
                heatLayer = L.heatLayer([],{radius: 25});
                map.addLayer(heatLayer);
            }
            heatLayer.setLatLngs(addressPoints);
        }});
    }
    $(document).ready(function(){
        init();
    });
    function init(){
        $("#picture").hide();
        $("#close").hide()
        $('#sensor').textbox({
            onClickButton: function () {
                var code = $('#sensor').val();
                if (code == "1002A" || code == "120100" || code == "230100") {
                    map.flyTo([ 39.93,116.4],11);//解决移动端上面的一个bug
                    $("#picture").show();
                    $("#close").show();
                }
                else{
                    alert("您输入的传感器编号有问题！！！")
                }
            }
        });

    }
    $("#close").click(function () {
        $("#picture").toggle(1000);
    })
    $("#guanbi").click(function () {
        $("#close").hide();
        $("#picture").hide(1000);
        return false;
    })

    widget =  new EchartsWidget("line", "line.json",'/siteHistory?{data:{site_code:%271002A%27}}');
    $(document).ready(function() {
        widget;
//            widget.changeParameterUrl('{data:{area_code:120100}}');
    });

    function onChange(area_code) {
        if(area_code == '230100'){


//              map.panTo([119.4, 39.93]);
            map.flyTo([45.7,126.6 ],11);
            widget =  new EchartsWidget("line", "line.json",'/cityHistory?{data:{area_code:230100}}');
        }
        if(area_code == '120100'){
            map.flyTo([39.02,117.12 ],11);
            widget =  new EchartsWidget("line", "line.json",'/cityHistory?{data:{area_code:120100}}');
        }
        if(area_code == '110100'){
            map.flyTo([ 39.93,116.4],11);
            widget =  new EchartsWidget("line", "line.json",'/siteHistory?{data:{site_code:%271002A%27}}');
        }

    }

</script></body>
</html>
